<div class="tab-con tab-con-2">
    <#if isUnlocked = true>
		<div class="data-wrap">
			<div class="chart-item">
				<div class="title">Gender</div>
				<div class="chart-wrap">
					<div class="chart-con" style="height:297px" id="genderChart"></div>
				</div>
			</div>
			<div class="chart-item">
				<div class="title">Age</div>
				<div class="chart-wrap">
					<div class="chart-con" style="height:297px" id="ageChart"></div>
				</div>
			</div>
            <#--                            <div class="chart-item">-->
            <#--                                <div class="title">Active User Ratio</div>-->
            <#--                                <div class="chart-wrap">-->
            <#--                                    <div class="chart-con" style="height: 257px;" id="ratioChart"></div>-->
            <#--                                </div>-->
            <#--                            </div>-->
			<div class="chart-item">
				<div class="title">
					Active Time Period (Hours)
				</div>
				<div class="chart-wrap">
					<div class="chart-con" style="height: 257px;" id="periodChart1"></div>
				</div>
			</div>
			<div class="chart-item">
				<div class="title">
					Active Time Period (Days)
                    <#--                                    <div class="sub-title">-->
                    <#--                                        <ul>-->
                    <#--                                            <li class="is-active" onclick="changeTime(this,0)">Day</li>-->
                    <#--                                            <li style="margin: 0 6px;">|</li>-->
                    <#--                                            <li onclick="changeTime(this,1)">Week</li>-->
                    <#--                                        </ul>-->
                    <#--                                    </div>-->
				</div>
				<div class="chart-wrap">
					<div class="chart-con" style="height: 257px;" id="periodChart2"></div>
				</div>
			</div>
			<div class="chart-item">
				<div class="title">
					Top Active Follower Country/Region List
				</div>
				<div class="chart-wrap">
					<div style="height: auto" class="chart-con" id="regionChart"></div>
				</div>
			</div>
			<div class="chart-item">
				<div class="title">
					Top Active Follower Languages
				</div>
				<div class="chart-wrap">
					<div class="chart-con" id="languageCon" style="align-items: center;display: flex;">
						<div class="pie-item">
							<div class="loop-pie">
								<div class="loop-pie-line loop-pie-r">
									<div class="loop-pie-c loop-pie-rm" id="loop-rc-0"></div>
								</div>
								<div class="loop-pie-line loop-pie-l">
									<div class="loop-pie-c loop-pie-lm" id="loop-lc-0"></div>
								</div>
								<div class="pie-num"></div>
							</div>
							<div class="pie-tx"></div>
						</div>
						<div class="pie-item">
							<div class="loop-pie">
								<div class="loop-pie-line loop-pie-r">
									<div class="loop-pie-c loop-pie-rm" id="loop-rc-1"></div>
								</div>
								<div class="loop-pie-line loop-pie-l">
									<div class="loop-pie-c loop-pie-lm" id="loop-lc-1"></div>
								</div>
								<div class="pie-num"></div>
							</div>
							<div class="pie-tx"></div>
						</div>
						<div class="pie-item">
							<div class="loop-pie">
								<div class="loop-pie-line loop-pie-r">
									<div class="loop-pie-c loop-pie-rm" id="loop-rc-2"></div>
								</div>
								<div class="loop-pie-line loop-pie-l">
									<div class="loop-pie-c loop-pie-lm" id="loop-lc-2"></div>
								</div>
								<div class="pie-num"></div>
							</div>
							<div class="pie-tx"></div>
						</div>
						<div class="pie-item">
							<div class="loop-pie">
								<div class="loop-pie-line loop-pie-r">
									<div class="loop-pie-c loop-pie-rm" id="loop-rc-3"></div>
								</div>
								<div class="loop-pie-line loop-pie-l">
									<div class="loop-pie-c loop-pie-lm" id="loop-lc-3"></div>
								</div>
								<div class="pie-num"></div>
							</div>
							<div class="pie-tx"></div>
						</div>
						<div class="pie-item">
							<div class="loop-pie">
								<div class="loop-pie-line loop-pie-r">
									<div class="loop-pie-c loop-pie-rm" id="loop-rc-4"></div>
								</div>
								<div class="loop-pie-line loop-pie-l">
									<div class="loop-pie-c loop-pie-lm" id="loop-lc-4"></div>
								</div>
								<div class="pie-num"></div>
							</div>
							<div class="pie-tx"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
    <#else>
		<div class="demo">
			<div class="tips" style="display: none;">
				<div class="title">
					Below is a sample report. Please unlock the report for more details.
				</div>
				<div>
                    <#if login == false>
						<a href="javascript:;" onclick="toLogin()">
							<button class="btn-info">Unlock Report</button>
						</a>
                    <#else>
						<button class="btn-info" onclick="checkUnlockPermission(2)">Unlock Report</button>
                    </#if>
				</div>
			</div>
			<img id="demoGraphicImg" src="${contextPath}/static/img/demo_graphics.png">
			<div class="overflow">
				<div class="overflow-title">Unlock to view more details.</div>
				<div class="btn-row">
					<button class="btn btn-default" onclick="showDemoImg(this)">Show Example</button>
                    <#if login == false>
						<a href="javascript:;" onclick="toLogin()">
							<button class="btn-info">Unlock Report</button>
						</a>
                    <#else>
						<button class="btn-info" onclick="checkUnlockPermission(2)">Unlock Report</button>
                    </#if>
				</div>
			</div>
		</div>
    </#if>
</div>